<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="/WEB-INF/shopizer-tags.tld" prefix="sm" %> 
<%@ page session="false" %>				
				

<script src="<c:url value="/resources/js/ckeditor/ckeditor.js" />"></script>
<script src="<c:url value="/resources/js/jquery.formatCurrency-1.4.0.js" />"></script>
<script src="<c:url value="/resources/js/jquery.alphanumeric.pack.js" />"></script>
<script src="<c:url value="/resources/js/json2.js" />"></script>
<script src="<c:url value="/resources/js/adminFunctions.js" />"></script>

<script src="<c:url value="/resources/js/jquery.showLoading.min.js" />"></script>
<script src="<c:url value="/resources/js/order-admin.js" />"></script>
<link href="<c:url value="/resources/css/showLoading.css" />" rel="stylesheet">	
<link href="<c:url value="/resources/css/order-admin.css" />" rel="stylesheet">	


<link href="<c:url value="/resources/css/jqueryui/jquery-ui.css" />" rel="stylesheet" > </link>
<script src="<c:url value="/resources/js/jqueryui/jquery.js" />" ></script>
<script src="<c:url value="/resources/js/jqueryui/jquery-ui.js" />" ></script>
<script src="<c:url value="/resources/js/jquery.formatCurrency-1.4.0.js" />"></script>
 
<script>

function displayErrorMessage(message) {
	
}


function getZones(listDiv, textDiv, countryCode, defaultValue){
	$.ajax({
	  type: 'POST',
	  url: '<c:url value="/shop/reference/provinces.html"/>',
	  data: 'countryCode=' + countryCode + '&lang=${requestScope.LANGUAGE.code}',
	  dataType: 'json',
	  success: function(response){
			var status = response.response.status;
			var data = response.response.data;
			//console.log(status);
			if((status==0 || status ==9999) && data) {
				//console.log(data);
				if(data && data.length>0) {
					$(listDiv).show();  
					$(textDiv).hide();
					$(listDiv).addItems(listDiv, data, defaultValue);		
				} else {
					$(listDiv).hide();             
					$(textDiv).show();
					if(defaultValue!=null || defaultValue !='') {
						$(textDiv).val(defaultValue);
					}
				}
			} else {
				$(listDiv).hide();             
				$(textDiv).show();
			}
	  },
	    error: function(xhr, textStatus, errorThrown) {
	  	alert('error ' + errorThrown);
	  	$('.sm').hideLoading();
	  }

	});
	
}


$.fn.addItems = function(div, data, defaultValue) {
	//console.log('Populating div ' + div + ' defaultValue ' + defaultValue);
	var selector = div + ' > option';
	var defaultExist = false;
    $(selector).remove();
        return this.each(function() {
            var list = this;
            $.each(data, function(index, itemData) {
            	//console.log(itemData.code + ' ' + defaultValue);
            	if(itemData.code==defaultValue) {
            		defaultExist = true;
            	}
                var option = new Option(itemData.name, itemData.code);
                list.add(option);
            });
            if(defaultExist && (defaultValue!=null && defaultValue!='')) {
           	 	$(div).val(defaultValue);
            }
     });
};

function listTransactions(orderId){

	$.ajax({
		  type: 'GET',
		  url: '<c:url value="/admin/orders/listTransactions.html"/>?id=' + orderId,
		  responseType:"application/json;charset=utf-8",
          contentType:"application/json;charset=utf-8",
		  dataType: 'json',
		  success: function(response){
				var status = response.response.status;
				var data = response.response.data;
				console.log(status);
				if((status==0 || status ==9999) && data) {
					//console.log(data);
					$('#transactionsModal').modal();
					var transactions = data;
					//console.log(transactions);
					for(i=0;i<transactions.length;i++) {
						var tr = '<tr><td>' + transactions[i].transactionId + '</td><td>' + transactions[i].transactionDate + '</td><td>' + transactions[i].transactionType + '</td><td>' + transactions[i].transactionAmount + '</td><td>' + JSON.stringify(transactions[i].transactionDetails) + '</td>';
						$('#transactionList').append(tr);
					}
				} 
		  },
		    error: function(xhr, textStatus, errorThrown) {
		  	alert('error ' + errorThrown);
		  	$('.sm').hideLoading();
		  }
	
	});
}

function sendInvoice(orderId){

	$.ajax({
		  type: 'GET',
		  url: '<c:url value="/admin/orders/sendInvoice.html"/>?id=' + orderId,
		  dataType: 'json',
		  success: function(response){
				var status = response.response.status;
				var data = response.response.data;
				//console.log(status);
				if(status==0 || status ==9999) {
					$(".alert-success").show();
				} else {
					$(".alert-error").show();
				}
				$('.sm').hideLoading();
		  },
		    error: function(xhr, textStatus, errorThrown) {
		  	alert('error ' + errorThrown);
		  	$('.sm').hideLoading();
		  }
	
	});
}

function updateStatus(orderId){

	$.ajax({
		  type: 'GET',
		  url: '<c:url value="/admin/orders/updateStatus.html"/>?id=' + orderId,
		  dataType: 'json',
		  success: function(response){
				var status = response.response.status;
				var data = response.response.data;
				//console.log(status);
				if(status==0 || status ==9999) {
					$(".alert-success").show();
				} else {
					$(".alert-error").show();
				}
				$('.sm').hideLoading();
		  },
		    error: function(xhr, textStatus, errorThrown) {
		  	alert('error ' + errorThrown);
		  	$('.sm').hideLoading();
		  }
	
	});
}

function resetMessages() {
	$(".alert-error").hide();
	$(".alert-success").hide();
}


function sendDownloadEmail(orderId){

	$.ajax({
		  type: 'GET',
		  url: '<c:url value="/admin/orders/sendDownloadEmail.html"/>?id=' + orderId,
		  dataType: 'json',
		  success: function(response){
				var status = response.response.status;
				var data = response.response.data;
				//console.log(status);
				if(status==0 || status ==9999) {
					$(".alert-success").show();
				} else {
					$(".alert-error").show();
				}
				$('.sm').hideLoading();
		  },
		    error: function(xhr, textStatus, errorThrown) {
		  	alert('error ' + errorThrown);
		  	$('.sm').hideLoading();
		  }
	
	});
}

function captureOrder(orderId){
	$.ajax({
		  type: 'POST',
		  url: '<c:url value="/admin/orders/captureOrder.html"/>?id=' + orderId,
		  dataType: 'json',
		  success: function(response){
				var status = response.response.status;
				var data = response.response.data;
				//console.log(status);
				if(status==0 || status ==9999) {
					$(".alert-success").show();
					window.location='<c:url value="/admin/orders/editOrder.html" />?id=' + orderId;
				} else {
					$(".alert-error").show();
				}
				$('.sm').hideLoading();
				$('#captureAction').removeClass('disabled');
		  },
		    error: function(xhr, textStatus, errorThrown) {
		  	alert('error ' + errorThrown);
		  	$('.sm').hideLoading();
		  }
	
	});
}

function loadCustomerByPhone(){
	var phone = $('#phoneNumber').val();
	$.ajax({
	  type: 'GET',
	  responseType:"application/json;charset=utf-8",
      contentType:"application/json;charset=utf-8",
	  dataType: "json",
	  url: '<c:url value="/admin/orders/customerInfo.html"/>?phone=' + phone,
	  success: function(response){
		  var status = response.response.status;
		  var data = response.response.data;
			if(status==0 || status ==9999) {
				$('#customersModal').modal();
				$(".alert-success").show();
			} else {
				$(".alert-error").show();
				$("#waiting").css("display","none");
			}
			var customers = data;
			
			if(customers==null || customers.length==0){
				var notFound = '<s:message code="report.data.notfound" text="Not Found"/>';
				$('#transactionList').append('<tr><td colspan="6">' + notFound + '</td></tr>');
			}
			for(i=0;i<customers.length;i++) {
				var tr = '<tr><td>' + customers[i].bfirstName + '</td><td>' + customers[i].blastName + '</td><td>' 
					+ customers[i].email + '</td><td>' + customers[i].phone + '</td><td>' 
					+ customers[i].bstreet + ' - ' + customers[i].bCity + '</td><td>'
					+ customers[i].dstreet + ' - ' + customers[i].dCity + '</td><td style="display:none;">'
					+ customers[i].bstreet + '</td><td style="display:none;">'
					+ customers[i].bState + '</td><td style="display:none;">'
					+ customers[i].bCity + '</td><td style="display:none;">'
					+ customers[i].dfirstName + '</td><td style="display:none;">'
					+ customers[i].dlastName + '</td><td style="display:none;">'
					+ customers[i].dstreet + '</td><td style="display:none;">'
					+ customers[i].dState + '</td><td style="display:none;">'
					+ customers[i].dCity + '</td><td style="display:none;">'
					+ customers[i].customerId + '</td><td><button class="selectedCustomer">Chọn</button></td>';
				$('#transactionList').append(tr);
			}			
	  }
	});
	$("#waiting").css("display","none");
}

function loadCustomerByEmail(){
	var email = $('#customerEmailAddress').val();
	$.ajax({
	  type: 'GET',
	  responseType:"application/json;charset=utf-8",
      contentType:"application/json;charset=utf-8",
	  dataType: "json",
	  url: '<c:url value="/admin/orders/customerInfo.html"/>?email=' + email,
	  success: function(response){
		  var status = response.response.status;
		  var data = response.response.data;
			if(status==0 || status ==9999) {
				$('#customersModal').modal();
				$(".alert-success").show();
			} else {
				$(".alert-error").show();
				$("#waiting").css("display","none");
			}
			var customers = data;
			if(customers==null || customers.length==0){
				var notFound = '<s:message code="report.data.notfound" text="Not Found"/>';
				$('#transactionList').append('<tr><td colspan="6">' + notFound + '</td></tr>');
			}
			for(i=0;i<customers.length;i++) {
				var tr = '<tr><td>' + customers[i].bfirstName + '</td><td>' + customers[i].blastName + '</td><td>' 
					+ customers[i].email + '</td><td>' + customers[i].phone + '</td><td>' 
					+ customers[i].bstreet + ' - ' + customers[i].bCity + '</td><td>'
					+ customers[i].dstreet + ' - ' + customers[i].dCity + '</td><td style="display:none;">'
					+ customers[i].bstreet + '</td><td style="display:none;">'
					+ customers[i].bState + '</td><td style="display:none;">'
					+ customers[i].bCity + '</td><td style="display:none;">'
					+ customers[i].dfirstName + '</td><td style="display:none;">'
					+ customers[i].dlastName + '</td><td style="display:none;">'
					+ customers[i].dstreet + '</td><td style="display:none;">'
					+ customers[i].dState + '</td><td style="display:none;">'
					+ customers[i].dCity + '</td><td style="display:none;">'
					+ customers[i].customerId + '</td><td><button class="selectedCustomer">Chọn</button></td>';
				$('#transactionList').append(tr);
			}			
	  }
	});
	$("#waiting").css("display","none");
}


$(document).ready(function(){
	addProductHandler();
	$('#datePurchased').datepicker();
	$('#datePurchased').datepicker("option", "dateFormat", "dd-mm-yy");
	$('#datePurchased').datepicker( "setDate", new Date());

	$('#copyInfo').click(function(){
		$('#shippingFirstName').val($('#customerFirstName').val());
		$('#shippingLastName').val($('#customerLastName').val());
		$('#shippingAddress').val($('#billingAdress').val());
		$('#shippingCity').val($('#billingCity').val());
		$('#shippingState').val($('#billingState').val());
	});
	
	$("#submitBtt").click(function(e){
		e.preventDefault();
		var hasError = false;
		$(".input-large.highlight").each(function(){
			if($(this).val().length <1){
				$(".alert-error").show();
				hasError = true;
				return;
			}
		});
		if(!hasError){
			$(this).parents('form:first').submit();
		}
	});
	
	 $("#addProdName").autocomplete({
	        width: 300,
	        max: 10,
	        delay: 100,
	        minLength: 1,
	        autoFocus: true,
	        cacheLength: 2,
	        scroll: true,
	        highlight: false,
	        source: function(request, response) {
	            $.ajax({
	                url: '<c:url value="/admin/orders/productInfo.html"/>',
	                dataType: "json",
	                data: { term: request.term },
	                success: function( data, textStatus, jqXHR) {
	                	if(data.length)
	                    console.log( data);
	                    var result = data.response.data;
	                    response( $.map( result, function( item ) {
	                        return {
	                            label: item.desc,
	                            value: item.desc,
	                            price: item.price
	                        }
	                    }));
	                },
	                error: function(jqXHR, textStatus, errorThrown){
	                     console.log( textStatus);
	                }
	            });
	        },
	        select: function( event, ui ) {
                $('#showPrice').val(ui.item.price);
    	        $('#showPrice').formatCurrency({ colorize: true, negativeFormat: '-%s%n', roundToDecimalPlace: -1, eventOnDecimalsEntered: true, symbol: ''});
            },
	 
	    });
	

	
	$("#checkPhone").click(function() {
		
		$('#transactionList').empty();
		resetMessages();
		$("#waiting").css("display","block");
		loadCustomerByPhone();
	});

	$("#checkMail").click(function() {		
		$('#transactionList').empty();
		resetMessages();
		$("#waiting").css("display","block");
		loadCustomerByEmail();
	});
	
	$("#refundAction").click(function() {
		resetMessages();
		$('#refundModal').modal();
	}); 
	
	$("#transactionsAction").click(function() {
		resetMessages();
		listTransactions('<c:out value="${order.order.id}"/>');
	});
	
	$("#sendInvoiceAction").click(function() {
		resetMessages();
		$('.sm').showLoading();
		sendInvoice('<c:out value="${order.order.id}"/>');
	});
	
	$("#updateStatusAction").click(function() {
		resetMessages();
		$('.sm').showLoading();
		updateStatus('<c:out value="${order.order.id}"/>');
	});
	
	$("#updateDownloadsAction").click(function() {
		resetMessages();
		$('.sm').showLoading();
		sendDownloadEmail('<c:out value="${order.order.id}"/>');
	});
	
	$("#captureAction").click(function() {
		resetMessages();
		$('#captureAction').addClass('disabled');
		$('.sm').showLoading();
		captureOrder('<c:out value="${order.order.id}"/>');
	});
	
	$(".close-modal").click(function() {
		 //location.href="<c:url value="/admin/orders/editOrder.html" />?id=<c:out value="${order.order.id}"/>";
	}); 
	
	$(".billing-country-list").change(function() {
		getZones('#billingZoneList','#billingZoneText',$(this).val(),'<c:out value="${order.billing.zone.code}" />');
    })

	
}); 


    $(function() {

        $("#refund").submit(function() {
        	$('#refundButton').addClass('disabled');
 			$('#refundModal').showLoading();
            var data = $(this).serializeObject();
            $.ajax({
                'type': 'POST',
                'url': "<c:url value="/admin/orders/refundOrder.html"/>",
                'contentType': 'application/json',
                'data': JSON.stringify(data),
                'dataType': 'json',
                'success': function(result) {
                   $('#refundModal').hideLoading();
                   var response = result.response;
                   var status = response.status;
                   if(status==0 || status ==9999) {
                	    //window.location='<c:url value="/admin/orders/editOrder.html" />?id=<c:out value="${order.order.id}" />';
                        $(".alert-success-modal").show();
                        //$(".close-modal").show();
                   } else { 
                        $(".alert-error-modal").html(response.statusMessage);
                        $(".alert-error-modal").show();
                   }
                   $('#refundButton').removeClass('disabled');
                }
            });
 
            return false;
        });
    });
 
    $.fn.serializeObject = function() {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
</script>

<div class="tabbable">

<jsp:include page="/common/adminTabs.jsp" />
			
<div class="tab-content">

<div class="tab-pane active" id="order-section">

	<div class="sm-ui-component" id="order-main-component">
		<p class="p-title">
			<h3><s:message code="label.entity.order" text="Create order" /></h3>
		</p>
			
     	<c:url var="orderSave" value="/admin/orders/saveNew.html"/>
        <form:form method="POST" enctype="multipart/form-data" commandName="order" action="${orderSave}">
	   		<form:errors path="*" cssClass="alert alert-error" element="div" />
            <div id="store.success" class="alert alert-success" style="<c:choose><c:when test="${success!=null}">display:block;</c:when><c:otherwise>display:none;</c:otherwise></c:choose>">
            	<s:message code="message.success" text="Request successfull"/></div>   
            <div id="store.error" class="alert alert-error" style="display:none;">
            	<s:message code="message.error" text="An error occured"/></div>

			<form:hidden path="order.customerId" id="customerId"/>
 		<div class="span8">  		
 			<div class="span4" style="margin-left:0px;">
	            <label><s:message code="label.customer.telephone" text="Customer phone"/></label>
	            <div class="controls">
		 			<form:input id="phoneNumber" cssClass="input-medium" path="order.billing.telephone"/>
		 			<a id="checkPhone" class="admin-link" >
						<s:message code="label.order.find" text="Find"/>
					</a>
		 			<span class="help-inline"><form:errors path="order.billing.telephone" cssClass="error" /></span>
		 			<div class="loading-image" id="waiting"></div>
	            </div>	
 			</div>
 			<div class="span4" style="margin-left:0px;">
 				<label><s:message code="label.customer.email" text="Email"/></label>
	            <div class="controls">
		 			<form:input id="customerEmailAddress" cssClass="input-large highlight" path="order.customerEmailAddress"/>
		 			<a id="checkMail" class="admin-link" >
						<s:message code="label.order.find" text="Find"/>
					</a>
		 			<span class="help-inline"><form:errors path="order.customerEmailAddress" cssClass="error" /></span>
	            </div>
 			</div>
 		</div>
 		<div class="span8">  		
 			<div class="span4" style="margin-left:0px;"> 
			
			<h6> <s:message code="label.customer.billinginformation" text="Billing information"/> 
				<a id="copyInfo" class="admin-link" style="text-decoration: none !important;">&nbsp;&nbsp;Copy>>></a>
			</h6>
			<address>			        

				<label><s:message code="label.customer.firstname" text="First Name"/></label>
	            <div class="controls">
	 				<form:input id="customerFirstName" cssClass="input-large highlight" path="order.billing.firstName"/>
	 				<span class="help-inline">
	 					<form:errors path="order.billing.firstName" cssClass="error" /></span>
	            </div>
	            
	            <label><s:message code="label.customer.lastname" text="Last Name"/></label>
	            <div class="controls">
		 					<form:input id="customerLastName" cssClass="input-large highlight" path="order.billing.lastName"/>
		 					<span class="help-inline"><form:errors path="order.billing.lastName" cssClass="error" /></span>
	            </div>
	            
           		<label><s:message code="label.customer.billing.streetaddress" text="Billing address"/></label>
	            <div class="controls">
		 				<form:input id="billingAdress" cssClass="input-large" path="order.billing.address"/>
		 				<span class="help-inline"><form:errors path="order.billing.address" cssClass="error" /></span>
	            </div>
	             
	            <label><s:message code="label.customer.billing.city" text="Billing city"/></label>
	            <div class="controls">
		 			<form:input id="billingCity" cssClass="input-large" path="order.billing.city"/>
		 			<span class="help-inline"><form:errors path="order.billing.city" cssClass="error" /></span>
	            </div>
	            
	            <div class="control-group"> 
                    <label><s:message code="label.customer.billing.zone" text="State / Province"/></label>
                    <div class="controls">		       							
                			<form:input  class="input-large" id="billingState" maxlength="100"  name="billingStateText" path="order.billing.state" /> 				       							
                           <span class="help-inline"><form:errors path="order.billing.state" cssClass="error" /></span>
                    </div>
                </div>
		    </address>
	            
            </div>
	            
            <div span="4">
			<h6><s:message code="label.customer.shippinginformation" text="Shipping information"/></h6>
			<address>
					<label><s:message code="label.customer.firstname" text="Shipping first name"/></label>
		            <div class="controls">
			 			<form:input id="shippingFirstName" cssClass="input-large" path="order.delivery.firstName"/>				 							
		            </div>
		            <label><s:message code="label.customer.lastname" text="Shipping last name"/></label>
		            <div class="controls">
			 			<form:input id="shippingLastName" cssClass="input-large" path="order.delivery.lastName"/>				 							
		            </div>
		            <label><s:message code="label.customer.shipping.streetaddress" text="Shipping address"/></label>
		            <div class="controls">
			 			<form:input id="shippingAddress" cssClass="input-large" path="order.delivery.address"/>		 				
		            </div>
		            <label><s:message code="label.customer.shipping.city" text="Shipping city"/></label>
		            <div class="controls">
			 			<form:input id="shippingCity" cssClass="input-large" path="order.delivery.city"/>
		            </div>
		            <div class="control-group"> 
                        <label><s:message code="label.customer.shipping.zone" text="State / Province"/></label>
                        <div class="controls">		       							
                     			<form:input id="shippingState" class="input-large" maxlength="100"  path="order.delivery.state" /> 				       							
                        </div>
                    </div>
			</address>
          </div>
	            
	    </div>
	
		<div class="span8">
 			<div class="span4" style="margin-left:0px;">
			 	<label><s:message code="label.customer.order.date" text="Order date"/></label>
			 	<div class="controls">	
					<form:input  cssClass="input-large" path="datePurchased" class="small" type="text"/>
		 			<span class="help-inline"><form:errors path="datePurchased" cssClass="error" /></span>
	            </div> 
			</div>

			<div class="span4" style="margin-left:0px;">
           		<label><s:message code="label.order.paymentmode" text="Payment mode"/></label>
				<div class="controls">
	 				<form:select path="order.paymentType" cssClass="order-dropdown">
	 			 		<form:option value="MONEYORDER">
							<s:message code="label.order.paymentmode.moneyorder" text="Money Order"/>
						</form:option>
	 			 		<form:option value="LOAN">
	 			 			<s:message code="label.order.paymentmode.loan" text="Loan"/>
	 			 		</form:option>
	 			 	</form:select>
            	</div>
           	</div>
		</div> 
			
		<div class="span8">
			<div class="span4" style="margin-left:0px;">			
				<div class="control-group">
             		<label><s:message code="label.payment.status" text="Payment Status"/></label>
					<div class="controls">      
	              		<form:select path="order.paymentStatus" cssClass="order-dropdown">
	           				<c:forEach items="${paymentStatusList}" var="paymentStatus">
	           					<form:option value="${paymentStatus}">
	           						<s:message code="label.payment.status.${paymentStatus.value}" text="${paymentStatus.value}"/>
	           					</form:option>
	           				</c:forEach>						
	    				</form:select>      
	               </div>
           		</div>
           	</div>
           	<div class="span4" style="margin-left:0px;">
           		 <div class="control-group">
                 <label><s:message code="label.entity.status" text="Status"/></label>	 
                 <div class="controls">      
                 			<form:select path="order.status" cssClass="order-dropdown">
           				<c:forEach items="${orderStatusList}" var="orderStatus">
           					<form:option value="${orderStatus}">
           						<s:message code="label.entity.order.status.${orderStatus}" text="${orderStatus}"/>
           					</form:option>
           				</c:forEach>						
    				</form:select>     
                  </div>
	           </div>  
           	</div>
          </div>
	
      
      	  <div class="span8" style="margin-top:20px;">
		      <table class="table table-bordered table-striped"> 
					<thead> 
						<tr> 
							<th colspan="2" width="47%"><s:message code="label.order.item" text="Item"/></th> 
							<th colspan="1" width="13%"><s:message code="label.quantity" text="Quantity"/></th> 
							<th width="13%"><s:message code="label.order.price" text="Price"/></th>
							<th width="17%"><s:message code="label.order.subtotal" text="Total"/></th>
							<th width="10%"><s:message code="label.order.action" text="Action"/></th>  
						</tr> 
					</thead> 
					
 				    <tbody id="productsList">
 				    	
						<tr class="totalClass" id="subtotalTd" > 
							<td colspan="3">&nbsp;</td> 
							<td><strong><s:message code="label.order.subtotal" text="Sub-total"/></strong></td> 
							<td colspan="2" id="subtotal"></td> 
						</tr>
						<tr class="totalClass" >
							<td colspan="3">&nbsp;</td> 
							<td ><strong><s:message code="label.order.total" text="Total"/></strong></td>
							<td colspan="2" id="total"></td>
						</tr> 
					</tbody>
				</table>
				
				<div style="margin-bottom: 20px;">
					<s:message code="label.order.product.title" text="Product" />: 
					<input type="text" name="productName" id="addProdName"/> &nbsp;&nbsp;&nbsp;
					<s:message code="label.order.product.quantity" text="Quantity" />:
					<input type="text" name="quantity" id="addQuantity" value="1" style="width:25px;"/> &nbsp;&nbsp;&nbsp;
					<s:message code="label.order.product.price" text="Price" />: 
					<input type="text" name="price" id="showPrice" style="width:100px;" disabled="disabled"/> &nbsp;&nbsp;&nbsp;
					<input type="button" value="<s:message code='label.generic.add' />" id="addProduct"><br>
					<span id="addingError" style="color:red;"></span>
				</div>
    	  </div>  

            <br/>   
            <div class="span8">
	     		   <div class="control-group">  
	                    <label><s:message code="label.generic.comments" text="Comment"/></label>
	                     <div class="controls">
	                         <form:textarea  cols="10" rows="3" path="orderHistoryComment"/>
	                    </div> 
	               </div>
              
	              <div class="form-actions">
	              		<button class="btn btn-medium btn-primary" id="submitBtt">
	              			<s:message code="label.save" text="Save"/>
	              		</button>
	      		  </div>
      		</div> 
            <br/>   
    
    	  </div>
   		</form:form>       
      </div>
	 </div>
  </div>

<div id="customersModal"  class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width:900px;z-index:500000;">
  <div class="modal-header">
          <button type="button" class="close close-modal" data-dismiss="modal" aria-hidden="true">X</button>
          <h3 id="myModalLabel"><s:message code="label.order.customers" text="List of customers" /></h3>
  </div>
    <div class="modal-body">
           <p>
			<table class="table table-hover" style="font-size:10px;">
			<thead>
				<tr>
				<th><s:message code="label.customer.firstname" text="First name" /></th>
				<th><s:message code="label.customer.lastname" text="Last name" /></th>
				<th><s:message code="label.customer.email" text="Email" /></th>
				<th><s:message code="label.customer.telephone" text="Phone number" /></th>
				<th><s:message code="label.customer.shipping.streetaddress" text="Billing address" /></th>
				<th><s:message code="label.customer.shipping.streetaddress" text="Shipping address" /></th>
				</tr>
			</thead>
			<tbody id="transactionList">
			</tbody>
			</table>
           </p>
             
    </div>  
    <div class="modal-footer">
           <button class="btn btn-primary" id="closeModal" data-dismiss="modal" aria-hidden="true"><s:message code="button.label.close" text="Close" /></button>
    </div>
</div>
